<template>
  <div style="padding: 2% 5% 0 5%">
    <a-radio-group
      v-model:value="activeKey.at_tab"
      button-style="solid"
      @change="getFeed"
    >
      <a-radio-button
        v-for="tab in tabList"
        :key="tab.at_name"
        :value="tab.at_tab"
        >{{ tab.at_name }}</a-radio-button
      >
    </a-radio-group>

    <!--a-button
      type="primary"
      style="float: right; margin-right: 10px"
      @click="showDrawer2"
      >插入新文章到多个标签</a-button
    -->
    <a-list
      class="demo-loadmore-list"
      :loading="loading"
      item-layout="vertical"
      :data-source="itemList.value"
    >
      <template #renderItem="{ item }">
        <a-list-item
          key="item.a_order"
          style="min-height: 100px; max-height: 300px"
        >
          <a-row>
            <a-col :span="1">
              <a-button
                v-if="item.a_order != 1"
                style="margin-bottom: 20px"
                @click="Uporder(item.a_order, item.a_id)"
              >
                <template #icon>
                  <component v-bind:is="ArrowUpOutlined" />
                </template>
              </a-button>
              <a-button
                v-if="item.a_order != lastOrder"
                style="margin-bottom: 20px"
                @click="Downorder(item.a_order, item.a_id)"
              >
                <template #icon>
                  <component v-bind:is="ArrowDownOutlined" />
                </template>
              </a-button>
              <a-button @click="Delfeed(item.a_order, item.a_id)">
                <template #icon>
                  <component v-bind:is="CloseOutlined" />
                </template>
              </a-button>
            </a-col>
            <a-col :span="23">
              <div style="margin-left: 10px">
                <a-typography-link
                  :href="'/user/articledetail?a_id=' + item.a_id"
                  >{{ item.a_title }}</a-typography-link
                >

                <div>{{ item.a_html }}</div>
                <div>
                  <a-image
                    height="60px"
                    v-for="url in item.imglist"
                    :key="url"
                    :src="url"
                  />
                </div>
        
              </div>
              <div class="icons" style="position:absolute;bottom:0px;margin-left:20px">
                  <span :key="LikeOutlined">
                    <component v-bind:is="LikeOutlined" />
                    {{ item.like_count }}
                  </span>
                  <span :key="MessageOutlined">
                    <component
                      v-bind:is="MessageOutlined"
                      style="margin-left: 20px"
                    />
                    {{ item.com_count }}
                  </span>
                  <span :key="StarOutlined">
                    <component
                      v-bind:is="StarOutlined"
                      style="margin-left: 20px"
                    />
                    {{ item.sub_count }}
                  </span>
                </div>
            </a-col>
          </a-row>

          <a-divider />
          <a-button
            v-if="item.a_order != lastOrder"
            @click="showDrawer(item.a_order + 1)"
          >
            在这里插入新文章
          </a-button>
        </a-list-item>
      </template>
    </a-list>
    <a-button @click="showDrawer(lastOrder + 1)"> 在这里插入新文章 </a-button>
    <a-drawer
      v-model:visible="visible"
      title="插入新文章"
      placement="right"
      width="40%"
      @after-visible-change="afterVisibleChange"
    >
      <a-form
        :model="additem"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item label="插入位置">
          <a-select
            ref="select"
            v-model:value="additem.a_order"
            style="width: 80px"
            :options="orderoption"
          >
          </a-select>
        </a-form-item>

        <a-form-item label="文章id">
          <a-input v-model:value="additem.a_id" />
        </a-form-item>
        <a-form-item label="当前标签">
          <a-select v-model:value="additem.at_name" style="width: 50%" disabled>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSubmit1">插入</a-button>
          <a-button style="margin-left: 10px" @click="() => (visible = false)"
            >取消</a-button
          >
        </a-form-item>
      </a-form>
    </a-drawer>

    <!--a-drawer
      v-model:visible="visible2"
      title="插入新文章"
      placement="right"
      width="40%"
      @after-visible-change="afterVisibleChange"
    >
      <a-form
        :model="additem2"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item label="插入位置">
          <a-select
            ref="select"
            v-model:value="additem2.a_order"
            style="width: 80px"
            :options="orderoption"
          >
          </a-select>
        </a-form-item>

        <a-form-item label="文章id">
          <a-input v-model:value="additem2.a_id" />
        </a-form-item>
        <a-form-item label="目标标签">
          <a-select
            v-model:value="additem2.at_tab"
            mode="multiple"
            style="width: 100%"
            placeholder="Please select"
            :options="tagoption"
          >
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSubmit2">插入</a-button>
          <a-button style="margin-left: 10px" @click="() => visible2=false">取消</a-button>
        </a-form-item>
      </a-form>
    </a-drawer-->
  </div>
</template>

<script>
import { get, post, tip } from "@/common";
import { defineComponent, ref, reactive } from "vue";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";

const itemList = reactive({});
const lastOrder = ref(0);
const tabList = ref([]);
const activeKey = ref({ at_tab: "1" });
const getTabList = () => {
  get("/user/feed/gettablist").then((res) => {
    tabList.value = res.data;
    getFeed();
  });
};
const getFeed = () => {
  get("/user/feed/getfeed", activeKey.value).then((res) => {
    itemList.value = res.data;
    lastOrder.value = res.data.length;
  });
};

const OrderItem = ref({
  a_order: "",
  a_id: "",
  at_tab: "",
});
const Uporder = (a_order, a_id) => {
  OrderItem.value.a_order = a_order;
  OrderItem.value.a_id = a_id;
  OrderItem.value.at_tab = activeKey.value.at_tab;
  post("/buser/queuemanage/uporder", OrderItem.value).then((res) => {
    getFeed();
  });
};
const Downorder = (a_order, a_id) => {
  OrderItem.value.a_order = a_order;
  OrderItem.value.a_id = a_id;
  OrderItem.value.at_tab = activeKey.value.at_tab;
  post("/buser/queuemanage/downorder", OrderItem.value).then((res) => {
    getFeed();
  });
};
const Delfeed = (a_order, a_id) => {
  OrderItem.value.a_order = a_order;
  OrderItem.value.a_id = a_id;
  OrderItem.value.at_tab = activeKey.value.at_tab;
  post("/buser/queuemanage/delfeed", OrderItem.value).then((res) => {
    getFeed();
  });
};

const visible = ref(false);
const visible2 = ref(false);
const additem = ref({
  a_order: "",
  a_id: "",
  at_tab: "",
  at_name: "",
});
const additem2 = ref({
  a_order: "",
  a_id: "",
  at_tab: [],
});
const afterVisibleChange = (bool) => {
  console.log("visible", bool);
};
const orderoption = ref([]);
const tagoption = ref([]);
const showDrawer = (key) => {
  visible.value = true;
  additem.value.a_order = key;
  additem.value.at_tab = activeKey.value.at_tab;
  tabList.value.forEach((Element) => {
    if (Element.at_tab == activeKey.value.at_tab) {
      additem.value.at_name = Element.at_name;
    }
  });
  var tmps = [
    { value: 1, label: "队首" },
    { value: itemList.value.length + 1, label: "队尾" },
  ];
  for (let i = 1; i < itemList.value.length; i++) {
    var tmp = { value: 0, label: "" };
    tmp.value = i + 1;
    tmp.label = "第" + tmp.value + "行";
    tmps.push(tmp);
    console.log(tmps);
  }
  orderoption.value = tmps;
};
const showDrawer2 = () => {
  visible2.value = true;
  additem2.value.a_order = 1;
  var tmps = [
    { value: 1, label: "队首" },
    { value: 0, label: "队尾" },
  ];
  var tmps2 = [];
  orderoption.value = tmps;
  for (let i = 0; i < tabList.value.length; i++) {
    var tmp2 = { value: "", label: "" };
    tmp2.value = tabList.value[i].at_tab;
    tmp2.label = tabList.value[i].at_name;
    tmps2.push(tmp2);
    console.log(tmps2);
  }
  tagoption.value = tmps2;
};

const onSubmit1 = () => {
  post("/buser/queuemanage/insert1", additem.value).then((res) => {
    if (res.code == 200) {
      visible.value = false;
      getFeed();
    }
  });
};
const onSubmit2 = () => {
  post("/buser/queuemanage/insert2", additem2.value).then((res) => {
    if (res.code == 200) {
      visible2.value = false;
      getFeed();
    }
  });
};
export default defineComponent({
  setup() {
    getTabList();

    return {
      StarOutlined,
      LikeOutlined,
      MessageOutlined,
      ArrowUpOutlined,
      ArrowDownOutlined,
      CloseOutlined,
      getTabList,
      getFeed,
      tabList,
      itemList,
      lastOrder,
      activeKey,
      OrderItem,
      Uporder,
      Downorder,
      Delfeed,
      visible,
      visible2,
      orderoption,
      tagoption,
      afterVisibleChange,
      showDrawer,
      showDrawer2,
      additem,
      additem2,
      onSubmit1,
      onSubmit2,
    };
  },
});
</script>

<style>
.ant-radio-button-wrapper,
.ant-radio-button-wrapper:last-child,
.ant-radio-button-wrapper:first-child {
  line-height: 25px;
  height: 25px;
  border-radius: 10px 10px 10px 10px;
  position: static;
  border-left: 1px solid #d9d9d9;
}
.ant-radio-button-wrapper,
.ant-radio-button-wrapper:last-child {
  margin-left: 10px;
}
.ant-radio-button-wrapper:not(:first-child)::before {
  position: fixed;
}
.ant-divider-horizontal {
  margin: 10px 0;
}
</style>
